<template>
    <div class="select" @keyup="onKeyup">
        <ElForm :inline="true" style="flex-grow: 1;">
            <template v-for="item in instance.labels" :key="item[0]">
                <ElFormItem :label="item[1].label + ':'"
                    v-if="!item[1].show || item[1].show({ data: instance.data, type: 'search', isPhone: false })">
                    <component v-if="item[1].vform"
                        :is="item[1].vform(item[1].prop, instance.data, instance.data[item[1].prop])">
                    </component>
                    <ElInput :placeholder="'请输入' + item[1].label" v-model="instance.data[item[1].prop]"
                        :clearable="true" :type="item[1].type" v-else></ElInput>
                </ElFormItem>
                <ElFormItem v-if="instance.labels.size === 1">
                    <ElInput :display="true" style="opacity: 0;height: 0;"></ElInput>
                </ElFormItem>
            </template>
        </ElForm>
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
import type { ListSearch } from "@b/model/base/list_search";//组件专属类/用组件就要继承这个类
import { ElForm, ElInput, ElFormItem } from "element-plus";

interface prop {
    instance: ListSearch
}
const props = defineProps<prop>()
const onKeyup = (e: any) => {
    if (e.key === "Enter") {
        props.instance.onSearch()
    }
}
</script>
<style scoped>
.select {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 2%;
    flex-grow: 1;
    color: var(--color-white)
}

.el-form .el-form-item {
    margin: 12px 10px;
}

.select>div {
    display: flex;
    align-items: center;
    margin-right: 30px;
}
</style>